*{
	margin: 0;
	padding:0;
}

/*此方案二：对inline-block属性的元素 通过设置margin text-align vertical-align 来保持水平垂直居中*/
body{
	text-align: center; 
	margin: 25%;
}
.rectangle{
	width: 400px;
	height: 200px;
	background: #CCC;
	position: relative;
	display: inline-block;
	vertical-align: middle;
}

/*此方案一是中间矩形不设置宽高，设置元素离父元素的百分比，实现随浏览器变化而变化
.rectangle{
	background: #CCC;
	position: absolute;
	top:25%;
	bottom: 25%;
	left:25%;
	right: 25%;
}*/

.sector-top{
	border-radius: 0 0 100% 0;
	background:#fc0;
	height: 50px;
	width: 50px;
	position: absolute;
	top: 0;
	left: 0;
}

.sector-bottom{
	border-radius: 100% 0 0 0;
	background:#fc0;
	height: 50px;
	width: 50px;
	position: absolute;
	bottom: 0;
	right: 0;
}
